<template>
  <div id="el-container">
    <el-row>
      <el-button type="danger" @click.prevent="myclickTest">测试按钮</el-button>
    </el-row>
    <el-row class="top-row" :gutter="10">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="grid-content bg-purple">
          <div class="panel-left green">
            <i class="fa fa-eye"></i>
          </div>
          <div class="panel-right">
            <h3>8,457</h3>
            <strong>Daily Visits</strong>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="grid-content bg-purple-light">222</div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="grid-content bg-purple">333</div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="grid-content bg-purple-light">4444</div>
      </el-col>
    </el-row>
    <el-row class="main-row">
      <el-col :span="24">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <!--柱形图组件-->
          <mytest :mytest_data="mytest_data" v-if="mytest_data"></mytest>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <!--折线图组件-->
          <mytest2 :mytest_data2="mytest_data2" v-if="mytest_data2"></mytest2>
        </el-col>
        <el-col :span="24">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <!--饼图组件-->
            <mytest3></mytest3>
          </el-col>
        </el-col>
      </el-col>

      <el-col :span="24">
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mytest from './../../components/my-test';
import mytest2 from './../../components/my-test2';
import mytest3 from './../../components/my-test3';
export default {
  data () {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }
    return {
      tableData: Array(5).fill(item),
      mytest_data: null,
      mytest_data2: null
    }
  },
  components: {
    mytest: mytest,
    mytest2: mytest2,
    mytest3: mytest3
  },
  methods: {
    myclickTest () {
      // 按钮用来测试请求
      console.log('click ok!!')
      this.$http.get('/my_line_test_data').then(res => {
        this.mytest_data2 = res
      })
    }
  },
  created: function () {
    // 请求伪造的柱形数据
    this.$http.get('/my_test_data').then(res => {
      this.mytest_data = res
      console.log(this.mytest_data)
    })
    // 请求伪造的折线图数据
    this.$http.get('/my_line_test_data').then(res => {
      this.mytest_data2 = res
      console.log(this.mytest_data2)
    })
  }
}
</script>

<style lang="less">
#el-container {
  .top-row {
    width: 100%;
    margin: 0 0 10px 0;
    > div {
      .grid-content {
        padding: 10px 0;
        text-align: center;
        color: #000;
        background-color: #fff;
        .panel-left {
          width: 50%;
          margin: 0 auto;
          background-color: #32d088;
          border-radius: 50%;
          i {
            font-size: 3em;
            color: rgba(255, 255, 255, 0.69);
            padding: 29px 0;
          }
        }
        .panel-right {
          width: 100%;
          h3 {
            font-size: 32px;
            padding: 0;
            margin: 10px;
            color: #8a8a8a;
          }
        }
      }
    }
  }
  .main-row {
    width: 100%;
    padding: 0 10px 0 0;
  }
}
</style>
